<template>
	<div class="page">
		<div class="swiper-view" v-if="!cardData.isShow">
			<XSwiperView :data="swiperData"></XSwiperView>
		</div>
		<div class="card-view" v-else>
			<XCardView :data="cardData"></XCardView>
		</div>
	</div>
</template>

<script>
import XSwiperView from '@/pages/doubleView/view/XSwiperView'
import XCardView from '@/pages/doubleView/view/XCardView'
	export default {
		components: {
			XSwiperView,
			XCardView
		},
		data () {
            return {
                swiperData : {
                	value: 0,
                	imgList: ['http://res.icmdb.com.cn/lustre-008.jpg','http://res.icmdb.com.cn/lustre-007.jpg','http://res.icmdb.com.cn/lustre-010.jpg','http://res.icmdb.com.cn/lustre-009.jpg']
                },
                cardData: {
                	isShow: false,
                	data: []
                }
            }
        },
        mounted() {
        	var $this = this;
        	var data = JSON.parse(localStorage.getItem('D_proData'));
            console.log(data);
            if (data != null) {
                $this.cardData.isShow = data.isShow || false;
                $this.cardData.data = data.cardData || [];
            }
        	window.addEventListener("storage", function (e) {
        		var data = JSON.parse(localStorage.getItem('D_proData'));
        		$this.cardData.isShow = data.isShow;
        		$this.cardData.data = data.cardData;
        	});
        }
	}
</script>

<style scoped lang="less">
	.page {
		width: 100%;
		height: 100%;
		.swiper-view {
			width: 100%;
			height: 100%;
		}
		.card-view {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>